<template>
    <div class="submit">
        <van-nav-bar
            title="提交订单"
            left-text="返回"
            left-arrow
            @click-left="returnHandler"
            />
        <div class="addr-box" v-if="address.length === 0">
            <div class="info">
                <span>{{ userList.name }}</span>
                <span>{{ userList.phone }}</span>
            </div>
            <div class="addr" @click="toChangeAddress"> 
                <span>{{ userList.address }} </span>
                <span><van-icon name="arrow" /></span>
            </div>
        </div>
        <div class="addr-box" v-else>
            <div class="info">
                <span>{{ address[0].name }}</span>
                <span>{{ address[0].phone }}</span>
            </div>
            <div class="addr" @click="toChangeAddress"> 
                <span>{{ address[0].addr }} - {{ address[0].detailAddr }} </span>
                <span><van-icon name="arrow" /></span>
            </div>
        </div>
        <div class="goods">
            <div class="goods-box" v-for="item in submit" :key="item.id">
            <img :src="item.image">
            <div class="goodsInfo">
                <div class="top">{{ item.title }}</div>
                <div class="bottom">
                    <span class="price">￥{{ (item.price * item.count).toFixed(2) }}</span>
                    <span>&times;{{ item.count }}</span>
                </div>
            </div>
        </div>
        </div>
       
        <div class="submitInfo">
            <ul>
                <li v-for="item in pageInfo">
                    <div>{{ item.title }}</div>
                    <div>
                        <span>{{ item.info }}</span>&nbsp;
                        <van-icon name="arrow" />
                    </div>
                </li>
            </ul>
        </div>
        <footer>
            <div class="total">总额：<span>￥{{ total.toFixed(2) }}</span></div>
            <div class="btn"><button @click="submitIndent">提交订单</button></div>
        </footer>
    </div>
</template>


<script setup>
import { computed, reactive } from 'vue'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
import { showLoadingToast,showSuccessToast,showConfirmDialog,showFailToast } from 'vant'

const store = useStore()
const router = useRouter()
let pageInfo = reactive([
    {title:'配送日期',info:''},
    {title:'支付方式',info:'我的余额'},
    {title:'发票信息',info:'个人'},
    {title:'积分',info:'暂无'},
    {title:'优惠券',info:'选择'}
])

//提交订单商品
let submit = computed(()=>{
    return store.getters['cartModule/getCartList'].filter((item)=> item.check === true)
}) 

//选择的地址
let address = computed(()=>{
    return store.getters['loginModule/getAddressList'].filter(item=> item.check === true)
})

//用户信息
let userList = computed(()=>{
    return store.getters['loginModule/getUserInfo']
})

//总额
let total = computed(()=> {
    return store.getters['cartModule/getTotal']
})
let money = computed(()=> store.getters['meModule/getMoney'])
function toChangeAddress(){
    router.push('/selectAddr')
}

//提交订单
function submitIndent(){
    if(money.value > total.value){
        let value = submit.value
        store.commit('meModule/addPaid',submit.value)
        showLoadingToast({
            message: '提交中...',
            forbidClick: true,
            });

        setTimeout(()=>{
            store.commit('meModule/subMoney',total.value)
            store.commit('cartModule/submitCart')
            store.commit('cartModule/allCheckFalse')
            store.commit('meModule/changePutAway',value)
            router.go(-1)
            showSuccessToast('购买成功')
        },1500)
    }else{
        showFailToast('您的余额不足')
    }
   
    
}
//点击返回
function returnHandler(){
    let value = submit.value
    showConfirmDialog({
        message:
            '还有商品待支付确定要返回吗',
        confirmButtonColor:'#f5222d'
        })
        .then(() => {
            store.commit('cartModule/submitCart')
            store.commit('meModule/changeToBePaid',value)
            store.commit('cartModule/allCheckFalse')
            router.go(-1)
        })
        .catch(() => {
            // on cancel
        });
}
</script>


<style lang="less" scoped>
@import '../../style/common.less';
.submit{
    min-width: 100%;
    min-height:621px;
    background: @g3;
    padding: 0 0 50px 0;
    .addr-box{
        width: 100%;
        min-height: 12%;
        background: @g1;
        padding-bottom: 20px;
        border-bottom: 1px solid @g6;
        >.info{
            padding: 6px 80px 6px 20px;
            // border-bottom: 1px solid @g7;
            height: 50%;
            display: flex;
            justify-content: space-between;
            >span{
                font-size: 1rem;
                font-weight: 600;
            }
        }
        >.addr{
            display: flex;
            padding: 6px 20px;
            justify-content: space-between;
            align-items: center;
            >span{
                font-size: .8rem;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 1;
                overflow: hidden;

            }
        }
    }
    .goods{
        height: 274px;
        overflow-x: hidden;
        >    .goods-box{
                // height: 200px;
                width: 100%;
                display: flex;
                padding: 10px;
                margin-bottom: 2px;
                border-top: 1px solid @g5;
                border-bottom: 1px solid @g5;
                background: @g1;
                justify-content: space-between;
                >img{
                    // height: 90%;
                    width: 30%;
                    border: 1px solid @g5;
                    border-radius: 4px;
                }
                >.goodsInfo{
                    width: 65%;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    >.top{
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: 2;
                        overflow: hidden;
                        font-size: .7rem;
                        font-weight: 600;
                    }
                    >.bottom{
                        padding: 0 10px;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        >.price{
                            color: red;
                        }
                    }
                }
             }
    }
    >.submitInfo{
        background: @g1;
        padding: 0 4px;
        >ul{
            >li{
                display: flex;
                justify-content: space-between;
                padding: 8px 10px;
                border-bottom: 1px solid @g4;
                color: @g9;
                font-size: .9rem;
                span{
                    font-size: .7rem;
                }
            }
        }
    }
    footer{
        position: fixed;
        bottom: 0;
        height: 50px;
        width: 100%;
        border-top: 1px solid @g5;
        background: @g1;
        padding: 0 16px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        >.total{
            font-size: .9rem;
            >span{
                font-size: 1.1rem;
                color: red;
            }
        }
        >.btn{
            >button{
                border: none;
                background: #f5222d;
                color: @g1;
                border-radius: 4px;
                font-size: .8rem;
                padding: 4px 12px;
            }
        }
    }
}


/deep/.van-nav-bar__text {
    color: #f5222d ;
}

/deep/ .van-badge__wrapper {
    color: #f5222d !important;
}
/deep/ .van-nav-bar__title{
    color: #f5222d;
}
</style>